<template>
  <div class="activities">
    <h1>公开活动列表</h1>
    <div class="activities-grid">
      <div v-for="activity in activities" :key="activity.id" class="activity-card">
        <h3>{{ activity.title }}</h3>
        <p class="date">日期：{{ activity.date }}</p>
        <router-link :to="'/public-activities/' + activity.id" class="view-detail">
          查看详情
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import activities from '@/data/activities.json'

export default {
  name: 'PublicActivitiesView',
  data() {
    return {
      activities: activities
    }
  }
}
</script>

<style scoped>
.activities {
  padding: 20px;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.activity-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.activity-card h3 {
  margin-top: 0;
  color: #2c3e50;
}

.date {
  color: #666;
  margin: 10px 0;
}

.view-detail {
  display: inline-block;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.view-detail:hover {
  background-color: #3aa876;
}
</style> 